<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>04_样式类名操作</title>
		<!-- 样式类名操作：针对css3、添加、移除、切换的元素类名操作
		     addClass()             有参 1个参和多个参
			                        语法：addClass("类名")
									<p class="类名">
									语法：addClass("类名1 类名2");
									<p class="类名1 类名2">
									功能：匹配元素集合中的所有元素
									     添加一个或者多个类名操作
			 removeClass()
			 toggleClass()
			 hasClass()
		 -->
		 <!-- 要求：1.jq引入
		            2.html:    div id="targetElement"
					           4个按钮    id="addClassBtn"
							              id="removeClassBtn"
										  id="toggleClassBtn"
										  id="hasClassBtn"
					           div  id="resultArea"
					3.css:  .bgColor{  300*300   背景色随意}
						    .borders{10个像素实线红色边框  倒角画圆}
					}
							   -->
		<script src="../js/jquery-1.11.1.js"></script>
		<!-- 平行元素style -->
		<style>
			.bgColor{
				width: 300px;
				height: 300px;
				background: #f00;
			}
			.broders{
				border: 10px solid #ffff00;
				border-radius: 50%;
			}
		</style>
	</head>
	<body>
		<div id="targetElement">  </div>
		<button id="addClassBtn">添加类名</button>
		<button id="removeClassBtn">移除类名</button>
		<button id="toggleClassBtn">切换类名</button>
		<button id="hasClassBtn">检查类名是否存在</button>
		<div id="resultArea"></div>
		<script>
			//1.点击   添加类名  按钮：添加效果【样式】    300*300  背景色红色
			//2点击按钮 实现圆 背景红色 圆有外边框黄色 10个像素 300*300
			$("#addClassBtn").click(function(){
				//div添加样式
				$("#targetElement").addClass("bgColor broders");
				$("#resultArea").html("<h4>添加样式类名：bgColor</h4>")
			});
			//3.点击移除类名恢复到原始状态
			$("#removeClassBtn").click(function(){
				//div添加样式
				$("#targetElement").removeClass(" broders");
				$("#resultArea").html("<h4>样式类名：borders</h4>")
			});
			/*切换*/
			$("#toggleClassBtn").click(function(){
				//div添加样式
				$("#targetElement").toggleClass(" broders");
				$("#resultArea").html("<h4>样式类名：borders</h4>")
			});
			//4.点击  切换类名  按钮  添加效果【样式】
			//300*300 背景色红色  圆 外层 10px黄色框
			
			
			//6.检查类名是否存在：true 存在   false不存在
			$("#hasClassBtn").click(function(){
				//div添加样式
				var hc=$("#targetElement").hasClass("bgColor");
				$("#resultArea").text("检查当前样式是否存在:"+hc)
			});
		</script>
	</body>
</html>